<template>
  <div class="custom-table">
    <table border="1">
      <thead>
        <th v-for="(item,index) in cols" :key="index">{{item.title}}</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in rows" :key="index">
          <td v-for="(itm,idx) in cols" :key="idx">{{item[itm.field]}}</td>
        </tr>
      </tbody>
    </table>
    <div id="credit_page" class="page-box clearfix">
      <div class="page-con fr">
        <span class="go-page fr">转到第 <input type="text" id="credit_index" class="pa-input"> 页
        <a href="javascript:void(0)" @click="gotoIndexPage" class="pa-btn sure">确定</a></span>
        <a href="javascript:void(0)" @click="gotoLastPage" class="next-n fr">尾页</a>
        <a href="javascript:void(0)" @click="gotoNextPage" class="next-n fr">下一页 </a>
        <a href="javascript:void(0)" @click="gotoPreviousPage" class="preve-n fr">上一页</a>   
        <a href="javascript:void(0)" @click="gotoFirstPage" class="next-n fr">首页</a>
        <span class="total-y fr"><strong><span id="credit_indexSpan">1</span></strong>/<span id="credit_totalPage">1</span>页</span>   
        <span class="record-y fr">共<strong><span id="credit_totalSize">0</span></strong>条记录</span>
        <input type="hidden" id="creditIndex" name="index" value="1">
        <input type="hidden" id="creditPageSize" name="pageSize" value="20">
      </div>
    </div>
    <a class="prev" href=""></a>
    <a class="next" href=""></a>
  </div>
</template>
<script> 
export default {
  name:"custom-table",
  props:{
    cols:{
      type:Array,
      default:[]
    },
    rows:{
      type:Array,
      default:[]
    }
  },
  created () {

  },
  methods:{
    gotoIndexPage () {

    },
    gotoLastPage () {

    },
    gotoNextPage () {

    },
    gotoPreviousPage () {

    },
    gotoFirstPage () {

    }


  }
}
</script>
<style lang="scss" scoped>
.custom-table {
  position: relative;
  .prev {
    position: absolute;
    left:0;    
    top: 0;
    width: 14px;
    height: 45px;
    background: url(../static/images/p1.png) no-repeat;
  }
  .next {
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    height: 45px;
    background: url(../static/images/p2.png) no-repeat;
  }
  table {
    width: 95%;
    margin: 0 auto;
    border:solid 1px $c_9;
    thead {
      th {
        height: 38px;
        background-color: $c_19;
        color:$c_4;
      }
    }
    tbody {
      tr {
        td {
          height: 29px;
          text-align: center;
        }
      }
    }
  }
  .page-box {
    padding: 10px 0;
    height: 22px;
    color: $c_4;
    line-height: 22px;
    margin-right: 22px;
    .page-con {
      padding-left: 10px;
      line-height: 30px;
      .go-page {
        line-height: 26px;
        padding-left: 10px;
        .pa-input {
          width: 32px;
          height: 26px;
          line-height: 26px;
          vertical-align: top;
          background-color: $c_3;
          color: $c_1;
          border: 1px $c_9 solid;
          border-radius: 0 !important;
          text-align: center;
        }
      }
      .next-n {
        margin: 0 5px;
        border: 1px $c_9 solid;
        display: inline-block;
        width: 58px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: $c_4;
      }
      .preve-n {
        border:1px $c_9 solid;
        height: 26px;
        line-height: 26px;
        width: 58px;
        text-align: center;
      }
    }
  }
}
</style>

